<template>
  <div>
    <div class="listView">
      <div class="talkList">
        <div
          class="talkItem"
          v-for="(item, index) in data.list"
          :key="index"
          @click.stop="jump(item,index)"
        >
          <img class="headIcon"  :src="item.head_icon" alt="" />
          <div class="content">
            <div class="name">{{ item.name}}</div>
            <div class="text">{{ item.content }}</div>
          </div>
          <div class="time">{{ item.time }}</div>
        </div>
      </div>
      <Tabbar :indexs="2"></Tabbar>
    </div>
    <talkRoom v-if="data.show_talkRoom" :data="data" @close="data.show_talkRoom=false"></talkRoom>
  </div>
</template>
<script setup>
import { io } from "socket.io-client";
import talkRoom from '@/components/talkRoom.vue'
import {reactive,getCurrentInstance,onMounted,onBeforeUnmount, provide, nextTick, computed, onActivated, onDeactivated} from 'vue'
const {proxy} = getCurrentInstance()
const scoket=reactive({
  scoket:null,
  userData:JSON.parse(sessionStorage.getItem('user_data'))
})
onMounted(()=>{
      scoket.scoket = io("http://localhost:3000");
      window.$scoket=scoket.scoket
      scoket.scoket.on("connect", () => {
        console.log(scoket.scoket.id); // x8WIv7-mJelg7on_ALbx
        scoket.scoket.emit('login',msgType('我叫吴佳辉','notice'))
      });
      scoket.scoket.on("login", (args) => {
        data.list[0].msgList.push(args)
         data.list[0].content=args.msg
         console.log('我登陆了')
         // x8WIv7-mJelg7on_ALbx
      });
      scoket.scoket.on("userList", (args) => {
        data.userList=args
        console.log(data.userList)
         // x8WIv7-mJelg7on_ALbx
      });
      scoket.scoket.on("all", (args) => {
        console.log('all')
        data.list[0].msgList.push(args) // x8WIv7-mJelg7on_ALbx
        data.list[0].content=args.msg
      });
      scoket.scoket.on("sendMsg", (args) => {
        console.log('sendMsg')
        if(data.list.some((item,index)=>{
          if(item.scoketId==args.fromScoketId||item.scoketId==args.toScoketId){
            data.list[index].msgList.push(args)
            data.list[index].content=args.msg
            return true
          }
        })){

        }else{
          addTalk({
            name:args.userName,
            head_icon:args.headIcon,
            content:args.msg,
            scoketId:args.fromScoketId,
            msgList:[args]
          })
        }
        console.log('我的私聊')
      });
      scoket.scoket.on("leave", (args) => {
        data.list[0].msgList.push(args) // x8WIv7-mJelg7on_ALbx
      });
    })

      // nextTick 后获取DOM的value是更新后的值
const sendAllMsg=(msg)=>{
  scoket.scoket.emit('all',msgType(msg))
}
const addTalk=(user)=>{
  data.list.push(user)
}
const data=reactive({
  show_talkRoom:false,
  select_index:0,
  userList:[],
  list:[{
    name:'公共聊天室',
    head_icon:'../../assets/game.png',
    content:'聊天室',
    scoketId:'all',
    msgList:[
      {
        type:'msg',
        fromScoketId:"",
        user_id:scoket.userData.user_id,
        userName:scoket.userData.name,
        headIcon:scoket.userData.head_icon,
        msg:"哈哈哈",
        toScoketId:'all',
        toName:'all',
        toHeadIcon:"",
        time:''
      }
    ]
  }]
})
const selectData=computed(()=>data[data.select_index])
const msgType=(msg,type,toId)=>{ 
       return {
        type:type?type:'msg',
        fromScoketId:scoket.scoket.id,
        user_id:scoket.userData.user_id,
        userName:scoket.userData.name,
        headIcon:scoket.userData.head_icon,
        msg:msg,
        toScoketId:toId?toId:'all',
        toName:'all',
        toHeadIcon:"" ,
        time:proxy.$time()
 }
}
const jump=(item,index)=>{
  
  data.select_index=index
  data.show_talkRoom=true
  console.log('我点击了',data.show_talkRoom)
  //scoket.scoket.emit('all',msgType.value)
}
onActivated(()=>{
  console.log('keeplive')
})
onDeactivated(()=>{
  console.log('keep离开')
})
onBeforeUnmount(()=>{
  console.log('我走了')
  scoket.scoket.emit('leave',msgType(`${scoket.userData.name}下线了`,'notice'))
  scoket.scoket.disconnect()
})
provide('scoket',scoket )
provide('addTalk',addTalk)
</script>
<style lang='less' scoped>
.talkItem {
  display: flex;
  padding: 30rem;
  border-bottom: 1px solid #f8f8f8;
  position: relative;
  color: #a5a5a5;
  .headIcon {
    width: 100rem;
    height: 100rem;
    margin-right: 20rem;
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    .name {
      font-size: 40rem;
      margin-bottom: 15rem;
      color: #000;
    }
    .text {
      font-size: 30rem;
    }
  }
  .time {
    font-size: 30rem;
    position: absolute;
    right: 30rem;
  }
}
</style>